import React from 'react';
import ReactDOM from 'react-dom';
import { Form, Input, Button,Modal, Checkbox, Radio, Tooltip, Icon, Row, Col, DatePicker, Select, Message, InputNumber   } from 'antd';
import '../../../../assets/css/landlord/table.css'
const confirm = Modal.confirm;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const Option = Select.Option;
const MonthPicker = DatePicker.MonthPicker;

let Demo = React.createClass({
  contextTypes: {
    router: React.PropTypes.object
  },

  getInitialState() {
    return {
      loading:false,
      data:[], // 收费项列表fetch得到的data
      costList:[], // 收费项列表
      rentContractId:'',//合约id
      normalFeekeys: [], // 正常收费项列表key
      costNameContent:'', // 收费项内容
      keys:[], //存储添加项的key和type（模板渲染类型）

      typeIdArry:[],   // 收费项类型id数组
      typeNameArry:[], // 收费项类型名称关联数组
      costIdArry:[], // 收费项名称id数组
      costNameArry:[], //收费项名称关联数组
      curType:'1',  // 当前选中的类型为1
      periodCollectAmount:'0.00', // 当期应收金额
      periodReceivedAmount:'0.00', // 当期实收金额
      receivedAmountArry: [], // 实收金额输入框id,金额关联数组
      idArry:[], // 实收金额输入框id数组
      rent:'',  // 总租金
      months:'', //租金缴纳月数
      depositPeriod: '',//押金期数
      rentPeriod: '',  // 月付期数
      contractRent:'', // 合约租金
      roomNames: {}, // 房间名称



    }
  },


  componentDidMount() {
    this.fetchCostList();
    this.getRoomName();


    let rentPeriod = this.props.location.state.rentPeriod;
    let depositPeriod =this.props.location.state.depositPeriod;
    let rent = this.getRent(this.props.location.state.contractRent,rentPeriod*1);
    this.setState({
      rent:rent,
      rentPeriod: rentPeriod,
      months: rentPeriod*1,
      depositPeriod: depositPeriod,
      contractRent: this.props.location.state.contractRent
    });

  },

  // 获取房间名称
  getRoomName(){
    let _me = this;
    Utils.sendAjax({
      url: '/rent/record/getRoomName',
      data: JSON.stringify({rentContractId:this.props.location.state.rentContractId}),
      callback: function(result) {
        if (result.code == '200') {
          _me.setState({
            roomNames: result.data
          })
        } else {
          Message.error(result.message, 10);
        }
      }
    })
  },

  // 计算租金
  getRent(contractRent, months){
    //let rent = (contractRent*months).toFixed(2);
    let rent = parseFloat(parseFloat(contractRent*months).toFixed(2));
    console.log('rentcontractRent*months',typeof parseFloat(contractRent*months));
    console.log('rent',typeof rent);
    this.setState({
      rent: rent
    });
    return rent;
  },


  // 计算应收总金额
  calculateCollectAmount(val){
    let data = val.data;
    let months = val.months;
    let rent = this.getRent(this.props.location.state.contractRent, months?months:this.state.rentPeriod*1);
    let money = 0;
    money += rent;
    if(data){
      data.forEach((item) => {
        money += parseFloat(item.collectAmount)
      });
    }

    return money;
  },
  // 实时获取实收金额输入框的值，并更新收集数组里的值
  getReceivedAmountArry(data){
    let obj = {};
    let arry = []
    data.forEach((item) => {
      obj[`${item.id}receivedAmount`] = item.collectAmount;
      arry.push(`${item.id}receivedAmount`);
    });
    let params = {
      receivedAmountArry:obj,
      idArry: arry
    }
    return params;
  },

  // 实时计算实收总金额
  calculatingCollectAmount(val){
    let data = val.data;
    let months = val.months;
    let rent = this.getRent(this.props.location.state.contractRent, months?months:this.state.rentPeriod*1);

    let money = 0;
    money += rent;
    let receivedAmountArry = this.state.receivedAmountArry;
    let idArry = this.state.idArry;

    if(data){
      if(!(data.name in receivedAmountArry)) {
        receivedAmountArry[data.name] = data.value;
        idArry.push(data.name);
      }
      receivedAmountArry[data.name] = data.value;
    }


    idArry.forEach((item) => {
      money += parseFloat(receivedAmountArry[item]);
    });

    console.log('rent',rent);

    this.setState({
      periodReceivedAmount:money
    });
  },
  // 绑定实收金额输入框
  handleGetValue(k, e){
    let value = e.target.value;
    let name = e.target.id;
    if(value == ''){
      value = 0
    }
    let params = {
      name: name,
      value: parseFloat(value)
    }
    console.log('name',name);

    this.calculatingCollectAmount({data:params,months:this.state.months});
  },


  // 获取收费项列表
  fetchCostList(){
    let _me = this;
    let id = this.props.location.state.rentContractId;
    let params = {rentContractId: id};
    Utils.sendAjax({
      url: '/rent/cost/list',
      data: JSON.stringify(params),
      callback: function(result) {
        if (result.code == '200') {

          let collectAmount = _me.calculateCollectAmount({data:result.data});
          let data = _me.getReceivedAmountArry(result.data);
          let receivedAmountArry = data.receivedAmountArry;
          let idArry = data.idArry;
          let costList = result.data;
          costList.forEach((item) => {
            item.status = '1'; // 设置默认操作为收取 ，即status = '1'
          });


          _me.getNormalFee(result.data);
          _me.setState({
            data:result.data,
            costList: costList,
            periodCollectAmount: collectAmount,
            periodReceivedAmount: collectAmount,
            receivedAmountArry: receivedAmountArry,
            idArry: idArry
          })

        } else {
          Message.error(result.message, 10);
        }
      }
    })
  },
  // 获取其他收费项  收费项类别列表
  fetchCostTypeList(){
    let _me = this;
    Utils.sendAjax({
      url: '/rent/costType/list',
      callback: function(result) {
        if (result.code == '200') {

          _me.getTypeList(result.data);
          _me.getCostList(result.data);
        } else {
          Message.error(result.message, 10);
        }
      }
    })
  },

  // 获取 costIdArry、costNameArry
  getCostList(data){
    let costIdArry = [];
    let costNameArry = [];
    data.forEach((item) => {
      let idArry = [];
      item.feeList.forEach((item1) => {
        idArry.push(item1.feeId);
        costNameArry[item1.feeId] = item1.feeName;
      });
      costIdArry[item.typeId] = idArry;

    });
    this.setState({
      costIdArry: costIdArry,
      costNameArry: costNameArry
    });
  },



  // 获取typeIdArry、typeNameArry
  getTypeList(data){
    let typeIdArry = [];
    let typeNameArry = [];
    data.forEach((item) => {
      typeIdArry.push(item.typeId);
      typeNameArry[item.typeId] = item.typeName;
    });

    this.setState({
      typeIdArry: typeIdArry,
      typeNameArry: typeNameArry
    });
  },


// 获取正常收费项的key
  getNormalFee(data){
    let normalFeekeys = this.state.normalFeekeys;
    data.forEach((item) =>{
      normalFeekeys.push(item.id)
    });
    this.setState({
      normalFeekeys:normalFeekeys
    })
  },
  // 添加其他收费项
  key: 0,
  handleAddOtherFee(){
    this.fetchCostTypeList();
    const { form } = this.props;

    let keys = form.getFieldValue('keys');
    let costIdArry = this.state.costIdArry;
    keys = keys.concat({key:this.key++,type:'1',options:costIdArry[1]});

    form.setFieldsValue({
      keys
    });
    this.setState({
      keys:keys
    });
  },

  // 删除其他收费项
  handleRemoveOtherFee(k){
    const { form } = this.props;

    let keys = form.getFieldValue('keys');
    keys = keys.filter((key) => {
      return key.key !== k;
    });
    form.setFieldsValue({
      keys,
    });
    this.setState({
      keys:keys
    });


    console.log('k',k);
    let params = {};
    params= {
      name:`${k}expenseAmount`,
      value:0
    };
    // 计算实收总金额
    this.calculatingCollectAmount({data:params,months:this.state.months});

  },

  // 获取租金缴纳月数
  getMonth(value){
    let val = value;
    if(val%this.state.rentPeriod != 0){
      val = parseInt(val/this.state.rentPeriod)*this.state.rentPeriod
    }

    // 计算实收总金额
    this.calculatingCollectAmount({months:val});

    // 计算应收总金额
    let periodCollectAmount = this.calculateCollectAmount({data:this.state.data,months:val});
    this.setState({
      periodCollectAmount : periodCollectAmount,
      months:val
    });


  },

  getContractExpenseList(data){
    let formData = [];
    data.keys.forEach(item => {
      let obj = {};
      obj.chargeName = data[item.key + "chargeName"];
      obj.chargeType = data[item.key + "chargeType"];
      obj.expenseAmount = data[item.key + "expenseAmount"]
      obj.otherItem = data[item.key + "otherItem"]
      formData.push(obj)
    });
    return formData;
  },
  getRentCostList(data){
    let formData = [];
    data.normalFeekeys.forEach(item => {
      let obj = {};
      obj.collectAmount = data[item + "collectAmount"];
      obj.contractFeeItemId = data[item + "contractFeeItemId"];
      obj.costName = data[item + "costName"];
      obj.costType = data[item + "costType"];
      obj.currScale = data[item + "currScale"];
      obj.depositBalance = data[item + "depositBalance"];
      obj.lastScale = data[item + "lastScale"];
      obj.receivedAmount = data[item + "receivedAmount"];
      obj.status = data[item + "status"];
      formData.push(obj)
    });
    return formData;
  },

  // 收费项类型切换 k：行号，type：收费项类型  type 4：其他
  handleCostTypeChange(k,type){
    let keys = this.state.keys;
    let costIdArry = this.state.costIdArry;

    let { form } = this.props;
    let obj = {};
    obj[`${k}chargeName`] = ''
    form.resetFields([`${k}chargeName`]);



    keys.forEach((item)=>{
      if(item.key == k){
        item.type = type;
        item.options = costIdArry[type];
      }
    });

    this.setState({
      keys: keys,
      curType: type
    });

  },
  handleCostNameChange(k, name){
    console.log(k,name);
  },

  // 点击操作 收取、免费改变costList里值
  handleSetStatus(k, e){
    let form = this.props.form;
    let costList = this.state.costList;
    let value = e.target.value;

    let receivedAmount;
    //let obj = {
    //  receivedAmount:receivedAmount,
    //  k:k,
    //  value: value
    //}
    //receivedAmount = this.changeCostList(obj);
    costList.forEach((item) => {

      if(item.id == k){
        item.status = value;

        receivedAmount = (item.status =='1' ? parseFloat(item.collectAmount): '0');
        let obj = {};
        obj[`${k}receivedAmount`] = parseFloat(item.collectAmount);
        form.resetFields([`${k}receivedAmount`]);
        console.log('receivedAmount',receivedAmount);
      }
    });
    this.setState({
      costList: costList
    });


    // 当为免收时，实收金额为0，重新计算实收总金额

    console.log('receivedAmount',receivedAmount);
    let params = {
      name: `${k}receivedAmount`,
      value: receivedAmount
    }
    this.calculatingCollectAmount({data:params, months:this.state.months});
  },

  // 收取方式选择 押金代扣  select选择
  handleCostType(k, e){
    let form = this.props.form;
    let costList = this.state.costList;
    let value = e;
    let receivedAmount;
    costList.forEach((item) => {
      if(item.id == k){
        item.costType = value;

        receivedAmount = (item.costType !='3' ? parseFloat(item.collectAmount): '0');
        let obj = {};
        obj[`${k}receivedAmount`] = parseFloat(item.collectAmount);
        form.resetFields([`${k}receivedAmount`]);
        console.log('receivedAmount',receivedAmount);
      }
    });
    this.setState({
      costList: costList
    });


    // 当为免收时，实收金额为0，重新计算实收总金额

    console.log('receivedAmount',receivedAmount);
    let params = {
      name: `${k}receivedAmount`,
      value: receivedAmount
    }
    this.calculatingCollectAmount({data:params, months:this.state.months});
  },

  // 收租表单提交
  rentRoomsCollect(params){
    let _me = this;
    _me.setState({
      loading: true,
    });
    Utils.sendAjax({
      url: '/rent/record/collect',
      data: JSON.stringify(params),
      callback: function(result) {
        if (result.code === '200') {
          let goPathUrl = '/landlord/rentManage/rentRooms/history'
          _me.context.router.push({pathname: goPathUrl, state: {rentContractId:params.rentContractId}});
        } else {
          _me.setState({
            loading: false,
          });
          Message.error(result.message, 10);
        }
      }
    })
  },

  handleSubmit(value) {

    var me=this;
    this.props.form.validateFieldsAndScroll((errors, values) => {
      if (!!errors) {
        console.log('Errors in form!!!');
        return;
      }
      
      console.log('收到表单值：', this.props.form.getFieldsValue());
      let  data = this.props.form.getFieldsValue();
      let rentCostList = this.getRentCostList(data);
      let contractExpenseList = this.getContractExpenseList(data);
      let dataList = {};
      dataList.rentCostList = rentCostList;
      dataList.contractExpenseList = contractExpenseList;

      dataList.rentContractId = data.rentContractId;
      dataList.payTime = Utils.formatDate(data.payTime);
      dataList.startTime = data.startTime;
      dataList.rentPeriod = data.rentPeriod;
      dataList.depositPeriod= data.depositPeriod;
      dataList.rentAmount = data.rentAmount;
      dataList.remark = data.remark;
      dataList.operationType = value;
      dataList.periodCollectAmount = data.periodCollectAmount;
      dataList.periodReceivedAmount = data.periodReceivedAmount;
      //dataList.roomId = data.roomId
      if (value == '1') {
      confirm({
        title: '确认收到全部租金吗？点击确认后将无法更改操作',
        content: `收款：${this.state.periodReceivedAmount}元`,
        onOk() {
          // 表单提交
          me.rentRoomsCollect(dataList);
        },
        onCancel() { },
      });
    }else{
      confirm({
        title: '生成收租单前，请认真核对各项费用！确认执行此操作吗？',
        onOk() {
          // 表单提交
          me.rentRoomsCollect(dataList);
        },
        onCancel() { },
      });
    }

    });
  },


  render() {
    const { getFieldProps,getFieldValue } = this.props.form;

    //const rentTime = getFieldProps('rentTime', {
    //  rules:[{
    //    required:true,
    //    type: 'date',
    //    message:'请输入收租月份',
    //  }],
    //})

    const payTime = getFieldProps('payTime', {
      rules:[{
        required:true,
        type: 'date',
        message:'请输入缴费日期',
      }],
    })



    /* 仪表类列表 ***************start*/
    let arry = [];
    // 计费方式chargeType的关联数组
    let chargeTypeObj = {
      1:'正常收费',
      2:'阶梯收费',
      3:'面积收费'
    }
    let costList =  this.state.costList;
    if(costList.length != 0){

      costList.forEach((item) => {
        // 当为免收2、或为押金代收3时，实收金额变为0
        let receivedAmountCur = (item.status == '2'||item.costType == '3')? '0': item.collectAmount.toString();

        const receivedAmount = getFieldProps(`${item.id}receivedAmount`, {
          initialValue: receivedAmountCur,
          rules:[{
            required:true,
            message:'实收金额不能为空',
          },{
            validator: Utils.floatNum,
          }
          ],
          onChange:this.handleGetValue.bind(this,item.id)
        });

        // 操作  收取、免收
        const statusProps = getFieldProps(`${item.id}status`, {
          initialValue: item.status,
          onChange:this.handleSetStatus.bind(this,item.id)
        });

        // 收取方式
        const costTypeProps = getFieldProps(`${item.id}costType`, {
          initialValue: '1',
          onChange:this.handleCostType.bind(this,item.id)
        });

        let content = (
              <tr key={item.id}>
                <td>
                  <Input type="hidden" {...getFieldProps(`${item.id}contractFeeItemId`, { initialValue: item.id })}/>
                  <Input type="hidden" {...getFieldProps(`${item.id}costName`, { initialValue: item.costName })}/>
                  <Input type="hidden" {...getFieldProps(`${item.id}collectAmount`, { initialValue: item.collectAmount })}/>
                  <Input type="hidden" {...getFieldProps(`${item.id}depositBalance`, { initialValue: item.depositBalance })}/>
                  <Input type="hidden" {...getFieldProps(`${item.id}lastScale`, { initialValue: item.lastScale })}/>
                  <Input type="hidden" {...getFieldProps(`${item.id}currScale`, { initialValue: item.currScale })}/>
                  <RadioGroup  {...statusProps}>
                    <Radio value="1">收取</Radio>
                    <Radio value="2">免收</Radio>
                  </RadioGroup>
                </td>

                <td  style={{width:100}}>{item.costName}</td>
                <td  style={{width:100}}>{item.classify == 1?'固定': '仪表'}</td>
                <td  style={{width:100}}>{chargeTypeObj[item.chargeType]}</td>
                <td>
                  {
                    item.collectAmount > item.depositBalance ?
                    (
                      <Select  {...costTypeProps}   style={{width:100}}>
                        <Option value="1">租客缴纳</Option>
                        <Option value="2">房东代收</Option>
                        <Option value="3" disabled>押金代扣</Option>
                      </Select>
                    ):(
                      <Select  {...costTypeProps}    style={{width:100}}>
                        <Option value="1">租客缴纳</Option>
                        <Option value="2">房东代收</Option>
                        <Option value="3">押金代扣</Option>
                      </Select>
                    )
                  }
                  
                </td>
                <td>
                  {item.classify == 1?'- -':item.lastScale}
                </td>
                <td>
                  {item.classify == 1?'- -':item.currScale}
                </td>
                <td>{item.price}</td>
                <td>{item.collectAmount}</td>
                <td>
                  <FormItem label="" >
                    {
                      item.status == '2' || item.costType == '3'?
                        <Input type="text" {...receivedAmount} disabled/>:
                        <Input type="text" {...receivedAmount} />
                    }
                  </FormItem>
                </td>
                <td>
                  {item.depositBalance}
                </td>
              </tr>
        );
        arry.push(content);
      });
    }else {
      let content = (
        <tr >
          <td colSpan="11">
            <Icon type="smile" />
             暂无数据
          </td>
        </tr>
      );
      arry.push(content);
    }

    /* 仪表类列表 ***************end*/

    /* 其他费用列表 ***************start*/


    getFieldProps('keys', {
      initialValue: [],
    });

    let typeIdArry = this.state.typeIdArry;

    let typeNameArry = this.state.typeNameArry;
    let costIdArry = this.state.costIdArry;
    let costNameArry = this.state.costNameArry;
    let keys = this.state.keys;

    let costNameOptionsArry = {};
    const otherFeeItem = keys.map((item)=> {
      const costTypeOptions = typeIdArry.map((typeItem)=> {
        if(costIdArry[typeItem]){
          const costNameOptions = costIdArry[typeItem].map((item1) => {
            return (
              <Option key={`costName${item1}`} value={item1.toString()}>{costNameArry[item1]}</Option>
            );
          });
          costNameOptionsArry[typeItem] = costNameOptions;

        }
        return (
          <Option key={`costType${typeItem}`} value={typeItem}>{typeNameArry[typeItem]}</Option>
        );
      });



      const chargeType = getFieldProps(`${item.key}chargeType`, {
        rules:[
          {
            required: true ,
            message: '请选择收费项类型'
          },
        ],
        onChange:this.handleCostTypeChange.bind(this,item.key)
      });

      let isValidate = true;
      isValidate = item.type == 4 ? false: true;

      const chargeName = getFieldProps(`${item.key}chargeName`, {
        rules:[
          {
            required: isValidate ,
            message: '请选择收费项名称'
          },
        ],
        onChange:this.handleCostNameChange.bind(this,item.key)
      });

      const expenseAmount = getFieldProps(`${item.key}expenseAmount`, {
        rules:[
          {
            required: true ,
            message: '金额不能为空'
          },{
            validator: Utils.floatNum,
          }
        ],
        onChange:this.handleGetValue.bind(this,item.key)
      });

      console.log(costNameOptionsArry[item.type]);
      return (
        <Row key={item.key} gutter={24}>
          <Col sm={5}>
            <FormItem label="收费项类别" >
              <Select {...chargeType} placeholder="请选择" notFoundContent="暂无" style={{width:100}}>
                {costTypeOptions}
              </Select>
            </FormItem>
          </Col>

          <Col sm={5}>
            {
              item.type == 4 ?
                <FormItem label="其他收费项" >
                  <Input {...getFieldProps(`${item.key}otherItem`, { })}  style={{width:100}}/>
                </FormItem>
                :
                <FormItem label="收费项名称" >
                  <Select {...chargeName} placeholder="请选择" notFoundContent="暂无" style={{width:100}}>
                    {costNameOptionsArry[item.type]}
                  </Select>
                </FormItem>
            }

          </Col>
          <Col sm={7}>
            <FormItem label="金额" >
              <Input type="text" {...expenseAmount}  style={{width:100}}/>元
            </FormItem>
          </Col>
          <Col sm={2}>
            <FormItem >
              <span className="addfree-btn" onClick={() =>this.handleRemoveOtherFee(item.key)}>
                <Icon title="删除" type="cross" />
              </span>
            </FormItem>
          </Col>
        </Row>
      );
    });


    /* 其他费用列表 ***************end*/

    // 房间名称
    let roomNames = this.state.roomNames.roomNames ?  this.state.roomNames.roomNames : [];
    console.log(roomNames)

    let roomNamesArry = [];
    let length = roomNames.length;
    console.log(length)
    roomNames.forEach((item, index) => {
      console.log(index);

      let content = length == index +1 ?
        (
          <span>{item}</span>
        ):(
        <span>{item}<span className="ant-divider" /></span>
      );
      roomNamesArry.push(content);
    });
  let startTime = this.state.roomNames.startTime ? this.state.roomNames.startTime : '';
    let start = startTime.split("-");
    let month = parseInt(start[1])+this.state.months;
    let n = Math.floor(month/12);
    // console.log(parseInt(start[1])+this.state.months)
    let year =month >12*n ? parseInt(start[0])+n : month%12===0 ? parseInt(start[0])+n-1 : parseInt(start[0]);
    let day = parseInt(start[2])-1<10 ? '0'+(parseInt(start[2])-1) : parseInt(start[2])-1;

    let endTime = month > 12*n && month<=12*n+12 ? month-12*n : month%12===0 ? 12 : month;
    let months = endTime<10 ? '0'+endTime : endTime;
    let endTimes = year+'-'+months+'-'+day
    console.log(endTimes)
    console.log('this.state.months',this.state.months)
    return (
      <Form inline  form={this.props.form}  className="form-group inner-content">
        <Row gutter={24}>
          <Col sm={8}>
            <Input type="hidden" {...getFieldProps('normalFeekeys', { initialValue: this.state.normalFeekeys })} />
            <Input type="hidden" {...getFieldProps(`rentContractId`, { initialValue: this.props.location.state.rentContractId })}/>
            <Input type="hidden" {...getFieldProps(`periodCollectAmount`, { initialValue: this.state.periodCollectAmount })}/>
            <Input type="hidden" {...getFieldProps(`periodReceivedAmount`, { initialValue: this.state.periodReceivedAmount })} />
            <Input type="hidden" {...getFieldProps(`rentAmount`, { initialValue: this.state.rent })} />
            <Input type="hidden" {...getFieldProps(`rentPeriod`, { initialValue: this.state.months })} />
            <Input type="hidden" {...getFieldProps(`startTime`, { initialValue: this.props.location.state.nextRentTime })} />


            <FormItem label="房间名称" >
              <p className="ant-form-text">{roomNamesArry}</p>
            </FormItem>
          </Col>
          <Col sm={8}>
            <FormItem label="租客姓名" >
              <p className="ant-form-text">{this.props.location.state.renterName}</p>
            </FormItem>
          </Col>
          <Col sm={8}>
            <FormItem label="租赁方式" >
              <p className="ant-form-text">押 {this.state.depositPeriod} 付 {this.state.rentPeriod}</p>
            </FormItem>
          </Col>
        </Row>
        <Row gutter={24}>

          <Col sm={8}>
            <FormItem label="租金" >
              <p className="ant-form-text">￥{this.state.rent}</p>
            </FormItem>
          </Col>

          <Col sm={8}>
            <FormItem label="收租起始日" >
              <p className="ant-form-text">{this.state.roomNames.startTime}</p>

            </FormItem>
          </Col>
          <Col sm={8}>
            <FormItem label="收租结束日">
              <p className="ant-form-text">{endTimes}</p>
            </FormItem>
          </Col>

        </Row>
        <Row gutter={24}>
          <Col sm={8}>
            <FormItem label="交租月数" >
              <InputNumber min={1*this.state.rentPeriod}
                           value={this.state.months}
                           step={this.state.rentPeriod}
                           onChange={this.getMonth}
              />个月
            </FormItem>
          </Col>

          <Col sm={8}>
            <FormItem label="缴费日期" >
              <DatePicker {...payTime} />
            </FormItem>
          </Col>

        </Row>

        <table className="normal-table">
            <thead className="ant-table-thead">
            <tr>
                  <th>操作</th>

                  <th style={{width:100}}>收费项名称</th>
                  <th>计费分类</th>

                  <th>计费方式</th>

                  <th>收取方式</th>

                  <th>上次刻度</th>

                  <th>本次刻度</th>

                  <th>单价 / 元</th>

                 <th>应收金额 / 元</th>

                  <th>实收金额 / 元</th>

                  <th>押金余额 / 元</th>
            </tr>
            </thead>
          <tbody className="ant-table-tbody">

            {arry}

          </tbody>
        </table>
        <Row gutter={24}>
          <Col sm={8}>
            <FormItem style={{ marginTop: 24 }}>
              <Button type="primary" onClick={this.handleAddOtherFee}>追加其他费用</Button>
            </FormItem>
          </Col>
        </Row>
        {getFieldValue('keys').length ? otherFeeItem : null}
        <Row gutter={24}>
          <Col sm={8}>
            <FormItem label="应收金额" >
              <p className="ant-form-text">{this.state.periodCollectAmount}</p>元
            </FormItem>
          </Col>

          <Col sm={8}>
            <FormItem label="实际收款" >
              <p className="ant-form-text">{this.state.periodReceivedAmount}</p>元

            </FormItem>
          </Col>
          <Col sm={16}></Col>
        </Row>
        <Row gutter={24}>
          <Col sm={16}>
              <FormItem label="备注" style={{marginLeft : -60}}>
                <Input type="textarea" {...getFieldProps('remark',{initialValue : ''})} style={{width : 464}}/>
              </FormItem>
          </Col>
        </Row>
        <FormItem style={{ marginTop: 24 }}>
          <Button type="ghost" htmlType="submit" onClick={this.handleSubmit.bind(this, '2')} style={{ marginRight: 20 }} >发送账单给租客</Button>
          <Button type="primary" loading={this.state.loading} onClick={this.handleSubmit.bind(this, '1')}>确认收租</Button>
        </FormItem>
      </Form>
    );
  },
});

Demo = Form.create()(Demo);
export default Demo